<template>
  <!-- 导入基本数据 -->
  <a-modal
    :visible="importExeclVisible"
    title="补贴对象数据待确认表"
    centered
    :closable="false"
    width="80%"
    dialogClass='member-execl-dialog'
    @cancel="importExeclVisible = false"
  >
    <ImportExeclPreview :execlData="execlData" :isMember="isMember" ref="ImportExeclPreview" />
    <section slot="footer">
      <a-button
        @click="importExeclVisible = false"
      >取消</a-button>
      <!-- <a-button
        type="primary"
        :loading="importExeclConfirmLoading"
        @click="handlerConfirmImport(1)"
      >{{ isPreview ? '待上传文件内容已确认' : '覆盖导入' }}</a-button> -->
      <a-button
        type="primary"
        :loading="importExeclConfirmLoading"
        @click="handlerConfirmImport(0)"
      >{{ isPreview ? '待上传文件内容已确认' : '增量导入' }}</a-button>
    </section>
    
  </a-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { ImportExecl } from '@/utils/execl'
import { famerServices, IMember } from '@/common/services/famer'
import ImportExeclPreview from './MemberImportExeclPreview.vue'
import MemberImportErrors from './MemberImportErrors.vue'
import { message, Modal } from 'ant-design-vue'
import { BUSINESS_CODE } from '@/api/interceptors'
import { isIDCard } from '@/utils/tools'
import { cropMemberServices } from '@/common/services/crop-member'

@Component({
  components: {
    ImportExeclPreview,
    MemberImportErrors
  }
})
export default class MemberImportMixin extends Vue {
  @Prop({
    type: Boolean,
    default: false
  })
  public isPreview!: boolean
  @Prop({
    type: String
  })
  public currentAreaId!: string

  // 上传execl
  public importExeclVisible = false
  public importExeclConfirmLoading = false
  public execlData: any[] = []
  public file!: File
  public isMember: boolean = true
  public handlerUploadExecl(isMember: boolean) {
    const _self = this
    this.isMember = isMember
    ImportExecl({
      is_used: '补贴',
      member_id: '农户/大户编号',
      member_nam: '农户/大户名称',
      role: '类型',
      member_addr: '所在地',
      member_law_id: '户主身份证/大户执照号',
      member_tel: '手机号',
      member_bank_num: '银行卡号',
      member_bank_code: '开户银行',
      plant_size: '粮食种植面积(亩)',
      field_size: "确权面积(亩)",
      bt_size: '补贴面积（亩）',
      pay_price: '补贴标准(元/亩)',
      bt_price_total: '补贴总金额（元）',
      s_a_id: '行政地区编码',
      readme: '备注'
    }, (data, map) => {
      return data.slice(1)
    }).then(_ => {
      this.importExeclVisible = true
      // @ts-ignore
      this.execlData = _.formatedData || [];
      // @ts-ignore
      this.file = _.file
    })
  }

  public handlerConfirmImport(type: number = 0) {
    this.$confirm({
      title: '导入提示',
      content: type === 0 ? '本次导入数据将更新或追加到当前选择行政区，确认导入？' : '本次导入数据将替换当前选择行政区数据（原数据将被删除，不能在线恢复），确认导入？',
      onOk: () => {
        this.handlerImport(type)
      }
    })
  }

  public async handlerImport(type: number) {
    // @ts-ignore
    const data = this.$refs.ImportExeclPreview.execlData
    if (!data.length) {
      message.error("请导入数据")
      return false
    }

    // 预览模式下直接返回数据 + 关闭
    if (this.isPreview) {
      this.$emit('previewSuccess', {
        data,
        file: this.file
      })
      this.importExeclVisible = false
      return
    }

    this.importExeclConfirmLoading = true

    cropMemberServices.importCropMemberList({
      data,
      file_nam: this.file.name,
      s_a_id: this.currentAreaId,
      type
    }).then(_ => {
      const res = _.data
      if (res.code === BUSINESS_CODE.SUCCESS) {
        Modal.success({
          content: res.data || '数据导入成功',
          centered: true
        })
      } else {
        this.$dialog(MemberImportErrors, {
          messages: res.msg.map(str => ({ content: str }))
        }, {
          title: '异常农户数据列表',
          width: '60%',
          footer: null
        })
        // message.error({
        //   content: res.msg
        // })
      }
    }).finally(() => {
      this.importExeclVisible = false
      this.importExeclConfirmLoading = false
    })
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.house-holder /deep/ .ant-card-body {
  max-height: 600px;
  height: auto;
}
.member-list {
  display: flex;
  flex-direction: column;
}
</style>
